<template>
	<view class="container">
		<view class="header-section" v-if="list.length > 0">
			<textscroll :list="list" />
			<!-- <uni-notice-bar showIcon="true" scrollable="true" single="true" showClose="true" :text="list"></uni-notice-bar> -->
		</view>

		<view class="a01">
			<view class="beijing">
				<image :src="`${imgsrc}/img/app/inviteFriends_bg.png`"></image>
				<view class="activity" @tap="openRule">活动规则</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="rule_content">
				<text class="content_title">一、如何赢返利</text>
				<text>1、邀请页面</text>
				<text style="text-indent: 2em;">点击【立即邀请】按钮，分享活动链接给你的好友或者朋友圈。</text>
				<text>2、返利奖金的增加</text>
				<text style="text-indent: 2em;">好友通过链接，下载应用后，在应用中所有的充值消费，其中5%的充值金额，在7个工作日内将返利到你的账户。</text>
				<text>3、返利金的提现</text>
				<text style="text-indent: 2em;">点击提现，平台审核通过后，将立即支付到你的微信零钱账户中。</text>

				<text class="content_title">二、注意事项</text>
				<text>1、恶意刷单等作弊行为，将被取消活动资格并冻结奖金。</text>

				<text>2、期间如果有团队成员退款，则返利金额将相应扣除。</text>

				<text>3、提现只能在本应用中操作，一切解释权归属本公司所有。</text>
			</view>
		</uni-popup>
		<view class="a02">
			<view class="b01">
				<view class="header-img">
					<image :src="`${imgsrc}/img/app/inviteFriends_title-bg.png`"></image>
					<view class="text">好友团队列表</view>
				</view>
				<view class="item-box">
					<view class="navbar" :style="{top:headerTop}">
						<view class="row">
							<view class="nav-title border-right">{{user_count}}名</view>
							<view class="nav-title">{{income}}元</view>
						</view>
						<view class="row">
							<view class="nav-item border-right">团队成员</view>
							<view class="nav-item">赚取佣金</view>
						</view>

					</view>
					<view class="list">
						<view class="sub-list first" :class="subState">



							<mescroll-uni ref="mescrollRef" height="588" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
							 :up="upOption">
								<view class="row" v-for="(row,index) in dataList" :key="index">
									<view class="left">
										<view class="img">
											<image :src="row.avatar"></image>
										</view>
										<view class="ellipsis left-name">{{row.name}}</view>
									</view>

									<view class="right">+{{row.money}}元</view>
								</view>
							</mescroll-uni>




							<!-- <view class="tis" v-if="userList.length==0">
								<view class="img">
									<image src='/static/zanwujilu.png'></image>
								</view>
								<view class="text">你暂时无收益哦</view>
								<view class="text">快去邀请好友赚取收益吧</view>
							</view>
							<view class="row" v-for="(row,index) in userList" :key="index">
								<view class="left">
									<view class="img">
										<image :src="imgIcon + row.avatar"></image>
									</view>
									<view>{{row.name}}</view>
								</view>

								<view class="right">+{{row.money}}元</view>
							</view> -->
						</view>
					</view>

				</view>

			</view>
			<view class="b02">
				<view class="header-img">
					<image :src="`${imgsrc}/img/app/inviteFriends_title-bg.png`"></image>
					<view class="text">怎么邀请好友</view>
				</view>
				<view class="item-box">
					<image :src="`${imgsrc}/img/app/inviteFriends_process.png`"></image>
				</view>
			</view>
		</view>

		<!-- 脚部菜单 -->
		<view class="footer">
			<view class="text">我的邀请码：<span>{{inviteCode}}</span><span class='copy' @click="paste(inviteCode)">点击复制</span></view>
			<view class="btn">
				<view @tap="toInvitationCode">填写邀请码</view>
				<view class="active" @tap="share">立即邀请好友</view>
			</view>
		</view>

		<!-- share弹窗 -->
		<view class="share" :class="shareClass" @touchmove.stop.prevent="discard" @tap="hideShare">
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="h1">分享到</view>
				<view class="list">
					<view class="box" @tap="WeChatFriends">
						<image src="../../static/temp/wx.png"></image>
						<view class="title">
							微信好友
						</view>
					</view>
					<view class="box" @tap="circleFriends">
						<image src="../../static/temp/pyq.png"></image>
						<view class="title">
							朋友圈
						</view>
					</view>
					<!-- <view class="box" @tap="shareOther">
						<image src="../../static/temp/wb.png"></image>
						<view class="title">
							新浪微博
						</view>
					</view>
					<view class="box" @tap="shareOther">
						<image src="../../static/temp/qq.png"></image>
						<view class="title">
							QQ
						</view>
					</view> -->
				</view>
				<view class="btn" @tap="hideShare">
					取消
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Api from '@/common/api';
	import textscroll from '@/components/screenTextScroll.vue'
	// import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			textscroll,
			uniPopup
			// uniNoticeBar
		},
		data() {
			return {
				user_count: '',
				income: '',
				inviteCode: '', //邀请码
				pagenumber: 1, //请求页数：默认为第一页；
				imgsrc: Api.imgsrc,
				userList: [],
				shareClass: '', //分享弹窗css类，控制开关动画
				headerTop: 0,
				subState: '',
				url: '',
				imgIcon: Api.imgIcon,
				list: [
					'465618，刚成功邀请了1位成员，获得返利金额120元',
					'133213，刚成功邀请了1位成员，获得返利金额120元',
					'121321，刚成功邀请了1位成员，获得返利金额120元',
				],

				downOption: {
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					isLock: true, //锁定下拉刷新
				},
				// 上拉加载的常用配置
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 6, // 每页数据的数量,默认3
					},
					noMoreSize: 6, //配置列表的总数量要大于等于 noMoreSize 条菜显示 textNoMore 的提示
					textNoMore: '-- 我是有底线的 --',
					empty: {
						tip: '你暂时无收益哦 \r\n 快去邀请好友赚取收益吧',
						icon: '/static/empty/empty-data.png'
					}
				},
				dataList: []
			}
		},
		onPageScroll(e) {

		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			this.inviteCode = uni.getStorageSync('userInfo').invite_code; //邀请码

			// this.loadData()
		},
		methods: {
			// async loadData() {
			// 	var params = {
			// 		"page": this.pagenumber
			// 	}
			// 	console.log("start inviteFriends")
			// 	let data = await Api.apiCall('post', Api.agent.get_agent_user_money, params);
			// 	this.userList = data.infos;
			// 	this.income = data.income;
			// 	this.user_count = data.user_count;
			// 	this.url = data.url;
			// 	this.inviteCode = uni.getStorageSync('userInfo').invite_code;
			// },


			/**
			 * @param {Object} page
			 * @description 下来刷新回调
			 */
			upCallback(page) {
				let pageNum = page.num; //页码。默认从1开始
				this.loadData(pageNum);
			},
			async loadData(pageNum) {
				let params = {
						"page": pageNum
					},
					method = 'POST',
					data = await Api.apiCall(method, Api.agent.get_agent_user_money, params)
				if (data) {
					if (pageNum == 1) {
						this.preEveryTimeRequestNum = 0;
						this.dataList = []; //如果是第一页需手动置空列表
					}
					data.infos.map(e =>{
						e.avatar = e.avatar.includes('http') ? e.avatar : this.imgIcon + e.avatar
					})

					let hasNext = this.preEveryTimeRequestNum <= data.infos.length,
						curListLen = data.infos.length;
					this.preEveryTimeRequestNum = data.infos.length;
					this.income = data.income;
					this.user_count = data.user_count;
					this.url = data.url;


					if (data.infos.length > 0) {
						this.dataList = this.dataList.concat(data.infos);
						this.$nextTick(() => {
							this.mescroll.endSuccess(curListLen, hasNext);
						});
					} else {
						this.$nextTick(() => {
							this.mescroll.endSuccess(curListLen)
						});
					}
					// uni.$emit(`levelCount`, {
					// 	dataListCount: this.dataList.length,
					// 	tabIndex: this.i
					// });
				} else {
					//  请求失败,隐藏加载状态
					console.log(`error`)
					this.mescroll.endErr()
				}
			},


			//打开规则详情
			openRule() {
				this.$refs.popup.open()
			},

			// 分享
			share() {

				this.shareClass = 'show';
			},
			hideShare() {
				this.shareClass = 'hide';
				setTimeout(() => {
					this.shareClass = 'none';
				}, 150);
			},
			discard() {
				//丢弃
			},
			WeChatFriends() {
				console.log('**********微信好友分享***********');
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.url,
					title: "牧耘郎",
					summary: "我找到了一个高端的购物平台，商品价格低但品质非常好，快来看看吧！",
					imageUrl: "http://image.dfkjt.com/img/icon.png",

					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						this.hideShare();
						uni.showToast({
							title: '已分享',
							duration: 2000
						});
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			circleFriends() {
				console.log('**********朋友圈分享***********');
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: this.url,
					title: "牧耘郎",
					summary: "我找到了一个高端的购物平台，商品价格低但品质非常好，快来看看吧！",
					imageUrl: "http://image.dfkjt.com/img/icon.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						this.hideShare();
						uni.showToast({
							title: '已分享',
							duration: 2000
						});
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			shareOther() {
				uni.showToast({
					title: '暂未开启分享',
					duration: 2000
				});
			},
			toInvitationCode() {
				uni.navigateTo({
					url: '/pages/user/invitationCode'
				})
			},
			paste(value) {
				uni.setClipboardData({
					data: value,
					success: (res) => {
						this.$api.msg('复制成功')
					}
				});
				// #ifdef H5
				this.$api.msg('H5端暂不支持此功能，请自行复制')
				// #endif
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0);
		}
	}

	.yticon {
		font-size: 28upx;
		color: #232323;
	}

	.header-section {
		width: 100%;
		height: 68upx;
		// padding-left: 30upx;
		// display: flex;
		// flex-direction: row;
		// justify-content: center;
		// align-items: center;
		// background-color: #FFF5D9;

		// image {
		// 	width: 41upx;
		// 	height: 36upx;
		// }

		// .text {
		// 	flex: 1;
		// 	height: 100%;
		// 	font-size: $font-sm + 4upx;
		// 	color: #232323;

		// 	// span {
		// 	// 	color: #E52632;
		// 	// 	padding: 0 10upx;
		// 	// }

		// }
	}

	.a01 {
		width: 100%;
		height: 628upx;

		.beijing {
			width: 99.9%;
			height: 628upx;
			position: relative;

			image {
				width: 100%;
				height: 628upx;
			}

			.activity {
				width: 169upx;
				height: 68upx;
				left: 581upx;
				top: 30upx;
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFBC21;
				border-radius: 34upx 0 0 34upx;
				color: #FFFFFF;
				font-size: $font-sm + 4upx;
			}
		}

	}

	.rule_content {
		width: 500upx;
		// height: 60vh;
		// overflow-y: scroll;
		// -webkit-overflow-scrolling: touch;
		border-radius: 15upx;
		background-color: #FFF;
		box-sizing: border-box;
		padding: 30upx;
		font-size: 24upx;
		display: flex;
		flex-flow: column wrap;

		align-items: flex-start;
		color: #6d6d6d;

		text {
			margin: 10upx;
		}

		.content_title {
			margin-bottom: 15upx;
			font-size: 28upx;
			color: #232323;
		}
	}

	.a02 {
		width: 100%;
		padding: 0 50upx 220upx;
		background: linear-gradient(to bottom, rgba(255, 168, 41, 1.0), rgba(255, 222, 168, 1.0));

		.b01 {
			width: 100%;

			.header-img {
				width: 100%;
				height: 64upx;
				position: relative;
				padding: 0 110upx 0 116upx;

				image {
					width: 424upx;
					height: 64upx;
				}

				.text {
					position: absolute;
					top: 6upx;
					left: 224upx;
					color: #fff;
					font-size: $font-sm + 8upx;
				}
			}

			.item-box {
				width: 100%;
				padding: 30upx 20upx;
				margin: -28upx 0 42upx;
				border-radius: 25upx;
				box-shadow: 0upx 5upx 21upx rgba(249, 123, 0, 0.7);
				background-color: #fff;

				.navbar {
					width: 100%;
					height: 148upx;
					display: flex;
					flex-wrap: wrap;
					border-bottom: 1upx solid #873FFF;

					.row {
						width: 100%;
						height: 74upx;
						// border: 1upx solid red;
						display: flex;
						flex-direction: row;

						.nav-title {
							width: 50%;
							display: flex;
							justify-content: center;
							margin-top: 36upx;
							align-items: flex-end;
							font-size: $font-sm + 12upx;
							font-weight: 600;
							color: #232323;
						}

						.nav-item {
							width: 50%;
							display: flex;
							justify-content: center;
							margin-bottom: 26upx;
							align-items: flex-end;
							font-size: $font-sm + 4upx;
							color: #757777;

						}

						.border-right {
							border-right: 1upx solid #E1E4E5;
						}
					}


				}

				.tis {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					font-size: 28upx;

					.img {
						width: 100%;
						padding: 32upx 0 24upx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 230upx;
							height: 292upx;
						}
					}

					.text {
						width: 100%;
						height: 44upx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #ABADAD;
					}
				}

				.sub-list {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					.mescroll-uni-warp{
						width: 100%;
					}

					.row {
						width: 100%;
						height: 98upx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						color: #757677;
						font-size: $font-sm + 8upx;
						border-bottom: 1upx solid #E1E4E5;

						.left,
						.right {
							width: 50%;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;

						}

						.left {
							justify-content: flex-start;

							.left-name {
								display: block;
								width: 200upx;
							}

							.img {
								margin: 0 10upx 0 20upx;
								border-radius: 50%;
								overflow: hidden;
								box-sizing: border-box;
								width: 72upx;
								height: 72upx;
								border: 1upx solid #dfdfdf;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}

				}
			}
		}

		.b02 {
			width: 100%;

			.header-img {
				width: 100%;
				height: 64upx;
				position: relative;
				padding: 0 110upx 0 116upx;

				image {
					width: 424upx;
					height: 64upx;
				}

				.text {
					position: absolute;
					top: 6upx;
					left: 224upx;
					color: #fff;
					font-size: $font-sm + 8upx;
				}
			}

			.item-box {
				width: 100%;
				height: 858upx;
				padding-top: 42upx;
				margin-top: -28upx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0upx 5upx 21upx rgba(249, 123, 0, 0.7);
				background-color: #fff;
				border-radius: 20upx;

				image {
					width: 524upx;
					height: 688upx;
				}
			}
		}

	}

	.footer {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		height: 176upx;
		z-index: 2;
		display: flex;
		flex-wrap: wrap;
		background-color: #92723D;

		.text {
			width: 100%;
			height: 68upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: $font-sm + 4upx;

			.copy {
				margin-left: 42upx;
				color: #FFBC21;

			}

		}

		.btn {
			width: 100%;
			height: 108upx;
			display: flex;
			justify-content: space-between;

			view {
				width: 50%;
				height: 108upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				font-size: $font-sm + 8upx;
				background-color: #232323;

			}

			.active {
				color: #232323;
				background-color: #FFBC21;
			}

		}
	}

	.share {
		display: none;
		z-index: 1000;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.15s linear both;
			}

			.layer {
				animation: showLayer 0.15s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.15s linear both;
			}

			.layer {
				animation: hideLayer 0.15s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			background-color: rgba(0, 0, 0, .5);
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			z-index: 11;
		}

		.layer {
			width: 100%;
			position: fixed;
			z-index: 12;
			padding: 0 20upx;
			top: 100%;
			backdrop-filter: saturate(150%) blur(35upx);
			background-color: rgba(255, 255, 255, .8);
			border-radius: 20upx 20upx 0 0;

			.list {
				width: 100%;
				display: flex;
				justify-content: space-around;
				padding: 10upx 0 30upx 0;

				.box {
					// width: 25%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					image {
						width: 13.8vw;
						height: 13.8vw;
					}

					.title {
						margin-top: 10upx;
						display: flex;
						justify-content: center;
						width: 100%;
						font-size: 26upx;
					}
				}
			}

			.btn {
				width: 100%;
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				border-top: solid 1upx #666666;
			}

			.h1 {
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}
		}
	}
</style>
